<template>
  <div>
   <TpeNav></TpeNav>
    <!--中间轮播-->
    <div class="siw">
        <div class="siw-con">
          <div class="siw-con-left">
              <img src="../../assets/images/home/banner1.jpg" style="width:720px;height: 430px">
          </div>
          <div class="siw-con-right">
              <div class="siw-con-right-top">
                  <span>尚品汇快报</span>
                  <span>更多>></span>
                  <div class="space"></div>
                  <div class="express">
                    <ul>
                      <li>[特惠]备战开学季 全民半价购数码</li>
                      <li>[公告]备战开学季 全民半价购数码</li>
                      <li>[特惠]备战开学季 全民半价购数码</li>
                      <li>[公告]备战开学季 全民半价购数码</li>
                      <li>[特惠]备战开学季 全民半价购数码</li>
                    </ul>
                  </div>
                  <div class="software-list">
                    <div class="software-item">

                    </div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                    <div class="software-item"></div>
                  </div>
              </div>
              <div  class="siw-con-right-bottom">
                  <img src="../../assets/images/home/ad1.png">
              </div>
          </div>
        </div>
    </div>
    <!--  今日推荐  -->
    <Today></Today>
    <!--热卖-->
    <Selling></Selling>
    <!-- 猜你喜欢 -->
    <Like></Like>
    <!--家用电器 -->
    <Appliances></Appliances>
    <Appliances></Appliances>
    <!-- 商标  -->
    <trademark></trademark>
  </div>

</template>

<script>
import TpeNav from './TypeNav/index';
import Today from './Recommended/today';
import Selling from "@/page/Home/Hot/Selling";
import Like from "@/page/Home/Like/like";
import Appliances from "@/page/Home/Appliances/appliances";
import trademark from "@/page/Home/trademark/trademark";
import {reqBanner} from "@/api/request"
  export default {
    name:'Home',
  components:{TpeNav,Today,Selling,Like,Appliances,trademark},
   data(){
     return{

     }
   },
    created() {
      this.getBanner()
    },
    mounted() {

    },
    methods: {
      getBanner(){
        reqBanner().then((res) =>{
          console.log(res,'res')
        })
      },
      myswiper() {
        var swiper = new Swiper('.siw-con-left', {

        });
      }

    }
}
</script>

<style lang="less">
  .siw{
    width: 1200px;
    height: 461px;
    margin:0 auto;
    .siw-con{
      height: 430px;
      padding-left: 210px;
      .siw-con-left {
        width: 740px;
        height: 100%;
        float: left;
        padding-top: 5px;
      }
      .siw-con-right{
        width: 250px;
        height: 100%;
        float: right;
        .siw-con-right-top{
          width: 248px;
          height:350px;
          margin-top: 5px;
          border: 1px solid #e4e4e4;
          font-size: 14px;
          span:nth-child(1){
            float: left;
            height: 30px;
            line-height: 30px;
            padding-left: 15px;
          }
          span:nth-child(2){
            float: right;
            height: 30px;
            line-height: 30px;
            padding-right: 15px;
          }
          .space{
            height: 30px;
            margin:0px 10px 0px 10px;
            border-bottom: 1px solid #e4e4e4;
          }
          .express{
            ul{
              list-style: none;
              margin:12px 0px 12px -40px;
              li{
                height: 20px;
              }
            }
          }
          .software-list{
            display: flex;
            flex-flow: wrap;
            border-top: 1px solid #e4e4e4;
            .software-item{
              width: 24.5%;
              height: 64px;
              border-left: 1px solid #e4e4e4;
              border-bottom: 1px solid #e4e4e4;
            }
          }
        }
        .siw-con-right-bottom{
          margin-top: 3px;
        }
      }
    }
  }

</style>